import React from "react"
import { Row, Col, Menu } from 'antd'
import Link from 'next/link'

export default function Header() {
    return (
        <div className="header">
            <Row type="flex" justify="center" align="center">
                <Col span={14}>
                    <span className="headertitle">Liao Blog</span>
                </Col>
                <Col span={2}>
                    <Link href={{ pathname: '/' }}>
                        <a>首页</a>
                    </Link>
                </Col>
                <Col span={2}>
                    <Link href={{ pathname: '/list', query: { id: 1 } }}>
                        <a>技术</a>
                    </Link>
                </Col>
                <Col span={2} >
                    <Link href={{ pathname: '/life', query: { id: 2 }  }}>
                        <a>大学</a>
                    </Link>
                </Col>
                <Col span={1}>
                    <Link href={{ pathname: '/about' }}>
                        <a>关于</a>
                    </Link>
                </Col>
            </Row>
            <Row align="middle">
                <Col span={24}>
                    <h1>Liao Blog</h1>
                    <div className="imgtext">
                        <span>「离开世界之前 一切都是过程」</span>
                    </div>
                </Col>
            </Row>
            
            <style jsx>
                {`
                h1{
                    margin-top: 2rem;
                    font-size: 5rem;
                    color: #ffffff;
                    text-align: center;
                }
                .imgtext{
                    text-align: center;
                    font-size: 1rem;
                    color: #ffffff;
                }
                .header{
                    height: 20rem;
                    background: url("home-bg.jpg");
                }
                .headertitle{
                    color: #ffffff;
                    font-size: 1.2rem;
                }
                a{
                    color:#ffffff; 
                    font-size: 1.2rem;
                }
            `}
            </style>
        </div>
    )
}